<template>
	<view class="setUser">
		<view class="userPhoto dis">
			<view class="UPT">
				<image :src="userData.avatar" mode="aspectFill"></image>
			</view>
			<view class="UPB" @click="editPhoto">编辑头像</view>
		</view>
		<view class="userInfo">
			<view class="infoItem p20 dis" @click="openModal(1)">
				<view class="UIL">昵称</view>
				<view class="UIR dis">
					<view class="UNAME">{{ userData.nickname }}</view>
					<up-icon name="arrow-right" color="#969799" size="26rpx"></up-icon>
				</view>
			</view>
			<view class="infoItem p20 dis">
				<view class="UIL">性别</view>
				<view class="UIR dis">
					<up-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
						<up-radio
							:customStyle="{ marginBottom: '8px' }"
							v-for="(item, index) in radiolist1"
							:key="index"
							:label="item.name"
							:name="item.name"
							@change="radioChange"
						></up-radio>
					</up-radio-group>
				</view>
			</view>
			<view class="infoItem p20 dis" @click="openModal(2)">
				<view class="UIL">注销</view>
				<view class="UIR dis">
					<up-icon name="arrow-right" color="#969799" size="26rpx"></up-icon>
				</view>
			</view>
		</view>
		<view class="launchLogin" @click="outLogin">退出登录</view>
		<up-modal :title="title" :show="show10" :showCancelButton="true" @cancel="cancelFun" @confirm="confirmTextFun">
			<up-input :placeholder="placeholder" border="surround" v-model="value"></up-input>
		</up-modal>
	</view>
</template>

<script setup>
import { baseUrl } from '@/config/baseUrl.js';
import { getUserInfo, updateSex, updateNickname, logoff } from '@/config/api.js';
import { uploadImage } from '@/util/util.js';
import { ref, reactive } from 'vue';
import { onShow } from '@dcloudio/uni-app';

const userData = ref({});
const getUserInfoFun = async () => {
	const res = await getUserInfo();
	if (res.code == 0) {
		console.log(res.data.user);
		userData.value = res.data.user;
		radiovalue1.value = res.data.user.sex == 1 ? '男' : res.data.user.sex == 2 ? '女' : '未知';
		radiovalue2.value = res.data.user.sex == 1 ? '男' : res.data.user.sex == 2 ? '女' : '未知';
	}
};
getUserInfoFun();

// 基本案列数据
const radiolist1 = reactive([
	{
		name: '男',
		disabled: false
	},
	{
		name: '女',
		disabled: false
	},
	{
		name: '未知',
		disabled: false
	}
]);
const radiovalue1 = ref('男');
const radiovalue2 = ref('男');
const groupChange = (n) => {
	console.log('groupChange', n);
};

const radioChange = async (n) => {
	console.log('radioChange', n);
	const data = {
		sex: n == '男' ? '1' : n == '女' ? '2' : '0'
	};
	const res = await updateSex(data);
	console.log(res);
	if (res.code == 0) {
		radiovalue2.value = radiovalue1.value;
	} else {
		radiovalue1.value = radiovalue2.value;
	}
	uni.showToast({
		title: res.message,
		icon: 'none'
	});
};

// 编辑头像
const editPhoto = () => {
	uni.chooseImage({
		count: 1,
		sourceType: ['album'],
		success: (chooseRes) => {
			const tempFilePaths = chooseRes.tempFilePaths;
			const token = uni.getStorageSync('token');
			uni.uploadFile({
				url: baseUrl + '/wx/user/update/avatar',
				filePath: tempFilePaths[0],
				name: 'file',
				formData: {},
				header: {
					Authorization: 'Bearer ' + token
				},
				success: (uploadRes) => {
					const data = typeof uploadRes.data === 'string' ? JSON.parse(uploadRes.data) : uploadRes.data;
					if (data.code == 0) {
						userData.value.avatar = data.data.imgUrl;
					}
				},
				fail: (err) => {
					console.error(err);
				}
			});
		},
		fail: (err) => {
			console.error('选择图片失败:', err);
		}
	});
};

// 弹窗
const title = ref('修改昵称');
const placeholder = ref('请输入要修改的昵称');
const openModal = (val) => {
	if (val == 1) {
		title.value = '修改昵称';
		placeholder.value = '请输入要修改的昵称';
	} else {
		title.value = '确定要注销吗？';
		placeholder.value = '请填写立即注销';
	}
	show10.value = true;
};
const show10 = ref(false);
const value = ref('');
const cancelFun = () => {
	show10.value = false;
	value.value = '';
};
const confirmTextFun = async () => {
	if (title.value == '修改昵称') {
		if (!value.value) {
			uni.showToast({
				title: '请输入要修改的昵称',
				icon: 'none'
			});
		} else {
			const res = await updateNickname({ nickname: value.value });
			if (res.code == 0) {
				uni.showToast({
					title: '修改成功',
					icon: 'none'
				});
				userData.value.nickname = value.value;
			} else if (res.code == 1) {
				uni.showToast({
					title: res.message,
					icon: 'none'
				});
			}
		}
	} else {
		if (value.value != '立即注销') {
			uni.showToast({
				title: '请输入立即注销',
				icon: 'none'
			});
		} else {
			const res = await logoff();
			console.log(res);
			if (res.code == 0) {
				uni.showToast({
					title: '您的账号已注销',
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				});
			}
		}
	}
	cancelFun();
};

// 推出登录
const outLogin = () => {
	uni.removeStorageSync('schoolInfo');
	uni.removeStorageSync('historyList');
	uni.removeStorageSync('token');
	uni.reLaunch({
		url: '/pages/selectSchool/index?isIndex=1'
	});
};
</script>

<style lang="scss">
@import '@/uni_modules/uview-plus/theme.scss';
page {
	background-color: #f7f7f7;
}
.setUser {
	width: 100%;
	.userPhoto {
		flex-direction: column;
		align-items: center;
		width: 100%;
		.UPT {
			width: 170rpx;
			height: 170rpx;
			border-radius: 50%;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.UPB {
			margin-top: 30rpx;
			padding: 10rpx 30rpx;
			font-size: 26rpx;
			border-radius: 10rpx;
			background-color: #fff;
		}
	}
	.userInfo {
		margin-top: 120rpx;
		background-color: #fff;
		.infoItem {
			justify-content: space-between;
			align-items: center;
			color: #666;
			font-size: 26rpx;
			border-bottom: 2rpx solid #f5f6f8;
			.UIR {
				color: #969799;
				.UNAME {
					margin-top: -5rpx;
				}
			}
		}
		.infoItem:last-child {
			border-bottom: none;
		}
	}
	.launchLogin {
		margin: 0 auto;
		margin-top: 90rpx;
		width: 450rpx;
		line-height: 65rpx;
		border-radius: 40rpx;
		background: #fa2c19;
		color: #fff;
		text-align: center;
		font-size: 28rpx;
	}
}
</style>
